<template>
    <div>
        <a-menu mode="inline" :open-keys="openKeys" style="width: 100%" @openChange="onOpenChange" @select="selectItem" :defaultSelectedKeys="defaultSelectedKeys">
            <a-sub-menu v-for="items in menus" :key="items.mainKey">
              <span slot="title"><a-icon type="setting" /><span>{{items.mainKey}}</span></span>
              <a-menu-item v-for="item in items.children" :key="item.key">
                {{item.name}}
              </a-menu-item>
            </a-sub-menu>
        </a-menu>
    </div>
</template>
<style lang="less" scoped>

</style>
<script>
export default {
    name: 'MenuList',
    props: {
        menus: {
            type: Array,
            default: ()=> {
                return []
            }
        },
        defaultKeys: {
            type: Array,
            default: () => {
                return []
            }
        },
        rootKeys: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return{
            // rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
            // openKeys: ['sub1'],
            defaultSelectedKeys: [1],
            rootSubmenuKeys: [],
            openKeys: ['子菜单1'],
        }
    },
    methods: {
        init() {
            this.rootSubmenuKeys = this.rootKeys;
            this.openKeys = this.defaultKeys;
        },
        onOpenChange(openKeys) {
            console.log(openKeys,'openKeys')
            const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
            if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
              this.openKeys = openKeys;
            } else {
              this.openKeys = latestOpenKey ? [latestOpenKey] : [];
            }
        },
        selectItem(selectObj) {
            this.$emit('select-key', selectObj);
            console.log(selectObj,'selectkey');
        }
    }
}
</script>